<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title></title>
		<!-- element 自定义 css -->
		<link rel="stylesheet" href="../css/element.css" />
		<!-- public 自定义 css -->
		<link rel="stylesheet" href="../css/public.css" />

		<!-- 头部css -->
		<link rel="stylesheet" href="../common/css/header.css" />
		<!-- 表单css -->
		<link rel="stylesheet" href="../css/table.css" />

		<!-- 本页面css -->
		<link rel="stylesheet" href="css/index.css" />
		
		<link rel="stylesheet" href="css/out.css" />
		
		<style type="text/css">
			.table .el-input__suffix {
				display: flex;
				align-items: center;
			}
			
			.analyTableButton-wrapper > span{
				display: inline-block;
				cursor: pointer;
			}
			
			.analyTableButton-wrapper  .deep {
				color: #6462F3;
			}
			.analyTableButton-wrapper .error {
				color: #F21C30;
			}
			
			.analyTableButton-wrapper .normal,.analyTableButton-wrapper .error {
				margin-left: 30px;
			}
			
			.demo-ruleForm .el-form-item {
				display: flex;
				margin-bottom: 0px;
			}
			
			.demo-ruleForm .el-form-item__error {
				  top: 43px;
			}
			
			.yzButton.noClick {
				background: #8987FF;
				    color: #FFFFFF;
				    cursor: default;
				    opacity: 0.8;
				}
			
			
		</style>
		
		
	</head>

	<body>
		<!-- 头部嵌入 -->
		<script type="text/javascript" src="../common/header.js"></script>
		<!-- 导航 嵌入 -->
		<script type="text/javascript" src="../common/nav.js"></script>
		<div class="orderList-wrapper table-wrapper section" v-cloak>
			<div class="orderList-content-wrapper table-content-wrapper">
				<div class="serverListNav">
					<span @click="handleClickGotoHomePage" class="nav-item">总览</span>
					<span class="nav-item noClick">域名</span>
					<span @click="gotoDomainHomePage" class="nav-item">域名管理</span>
					<span @click="returnCurrentPage" class="nav-item">域名信息</span>
					<span class="nav-item">域名解析</span>
				</div>
				<div class="form-wrapper">
					<div class="from-title-wrapper">
						<span class="from-title">
							<i @click="returnCurrentPage" class="icon el-icon-back"></i>
							域名解析
						</span>
					</div>
					
					<ul class="notice-wrapper">
						<li class="notice-item">带www解析  主机记录：www ，记录类型：A ，记录值：主机IP地址 ，优先级：不填写</li>
						<li class="notice-item">不带www解析  主机记录：@ ，记录类型：A ，记录值：主机IP地址 ，优先级：不填写</li>
						<li class="notice-item">二级域名解析  主机记录：域名前缀 ，记录类型：A ，记录值：主机IP地址 ，优先级：不填写</li>	
						<li class="notice-item">别名解析  主机记录：www或前缀 ，记录类型：CNAME ，记录值：主机别名 ，优先级：不填写</li>
						<li class="notice-item">MX记录解析  主机记录：随便写 ，记录类型：MX ，记录值：主机别名 ，优先级：10或5</li>
					</ul>
					
					<div @click="handleClickAddRecord" :class="{'noClick':handleHaveNew() === true}" class="yzButton register deep mb-20">添加记录</div>

					<el-table class="table" empty-text ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%">
						<el-table-column label="主机名" width="auto">
							<template slot-scope="scope">
							  <span  v-if="!scope.row.isEdit">{{handleTableText(scope.row,'activeHostId')}}</span> 
								<div style="padding-bottom: 20px;padding-top: 20px;" v-else>
									<el-form :model="scope.row" :rules="rules" ref="ruleForm" label-width="0px" class="demo-ruleForm">
										  
										  <el-form-item prop="activeHostId">
											  <el-select style="width: 180px;" v-model="scope.row.activeHostId">
												<el-option
												  v-for="item in scope.row.hostOptions"
												  :key="item.id"
												  :label="item.label"
												  :value="item.id">
												</el-option>
											  </el-select>
										  </el-form-item>
									</el-form>
								</div>
								
								
								

							</template>
						</el-table-column>
						
						<el-table-column label="记录类型" width="auto">
							<template slot-scope="scope">
							  <span  v-if="!scope.row.isEdit">{{handleTableText(scope.row,'recordTypeId')}}</span> 
							  
							  <div style="padding-bottom: 20px;padding-top: 20px;" v-else>
							  	<el-form :model="scope.row" :rules="rules" ref="ruleForm" label-width="0px" class="demo-ruleForm">
							  		  <el-form-item  prop="recordTypeId">
							  				<el-select style="width: 180px;" v-model="scope.row.recordTypeId">
													<el-option
													  v-for="item in scope.row.recordTypeOptions"
													  :key="item.id"
													  :label="item.label"
													  :value="item.id">
													</el-option>
							  				</el-select>
							  		  </el-form-item>
							  	</el-form>
							  </div>
							  
							</template>
						</el-table-column>
						
						<el-table-column label="地址" width="auto">
							<template slot-scope="scope">
								<span  v-if="!scope.row.isEdit">{{scope.row.area}}</span> 
								<div style="padding-bottom: 20px;padding-top: 20px;" v-else>
									<el-form :model="scope.row" :rules="rules" ref="ruleForm" label-width="0px" class="demo-ruleForm">
										  <el-form-item  prop="area">
												<el-input style="width: 180px;"  v-model="scope.row.area"></el-input>
										  </el-form-item>
									</el-form>
								</div>
							</template>
						</el-table-column>
						
						
						
						<el-table-column label="优先级" width="auto">
							<template slot-scope="scope">
							  <span  v-if="!scope.row.isEdit">{{handleTableText(scope.row,'priorityId')}}</span> 
							  <el-select v-else style="width: 180px;" v-model="scope.row.priorityId">
								    <el-option
								      v-for="item in scope.row.priorityOptions"
								      :key="item.id"
								      :label="item.label"
								      :value="item.id">
								    </el-option>
							  </el-select>
							</template>
						</el-table-column>




						<el-table-column width="auto" label="最后操作时间">
							<template  slot-scope="scope">
								{{scope.row.lastOpeartionTime}}
							</template>
						</el-table-column>
						
						
						
						<el-table-column width="auto" label="操作">
							<template slot-scope="scope">
								<div class="analyTableButton-wrapper fboxRow" v-if="scope.row.isEdit" >
									<span class="deep" @click="saveColum(scope.row)">保存</span>
									<span class="normal"  @click="cancelColum(scope.row)">取消</span>
								</div>
								<div v-else class="analyTableButton-wrapper fboxRow">
									<span class="deep" @click="editColum(scope.row)">修改</span>
									<span class="error"  @click="removeColum(scope.row)">删除</span>
								</div>
								
							</template>
						</el-table-column>


					</el-table>
					<div class="pagination-wrapper">
						<div class="total-wrapper">
							<span class="totalSize">共有 {{pageInfo.totalSize}} 条记录</span>
							<el-select @change="handleSizeChange" v-model="pageInfo.pagesize">
								<el-option v-for="item in pageOptions" :key="item.value" :label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</div>
						<el-pagination :page-size="pageInfo.pagesize" @size-change="handleSizeChange" @current-change="handleCurrentChange"
						 :current-page="pageInfo.currentPage" layout="prev, pager, next, jumper" :total="pageInfo.totalSize">
						</el-pagination>
					</div>

					<el-dialog style="box-sizing: border-box;" width="640px" class="yz-el-dialog" :visible.sync="removeRecordVisble">
						<div slot="title" class="dialog-title">
							温馨提醒
						</div>
						<div class="dialog-content">
							<div class="dialog-content-infowrapper fboxRow mb-20">
								<img class="mr-20 flagImg" src="../img/warning-orange02.png" />
								<p class="fboxCenter" style="line-height: 25px;">
									您是否确定删除该条解析记录，删除之后该条记录将无效，是否删除？
								</p>
							</div>



							<div class="dialog-button-wrapper fboxRow">
								<div @click="confirmRemoveColumn" class="yzButton  confirm">确认</div>
								<div @click="removeRecordVisble = false" class="yzButton cancelButton">取消</div>
							</div>
						</div>
					</el-dialog>

				</div>
			</div>


		</div>

		<script type="application/javascript" src="../js/util.js"></script>
		<!-- vue  -->
		<script>
			let vmServerList = new Vue({

				el: '.orderList-wrapper',
				data: function() {
					
					
					return {
						
						//  新增
						
						
						removeRecordVisble: false, // 删除记录  dialog
						//  转出结果信息
						outResultInfo: {

						},
						activeSelectInfo: {  // 选中的信息
							
						},
						rules:{
							area:[ { required: true, message: '请输入正确的内容', trigger: 'blur' }],
						},
							
						
						
						// 表格数据
						initTableData:[], // 原始数据
						
						tableData: [{
							id: 1,
							isNew: false , // 是否是新增的  默认是false
							isEdit:false, // 是否处于可编辑状态   默认为不可编辑
							activeHostId: 2,  // 这里只是测试数据  选中的主机类型  
							hostOptions:[{  // 主机可选
								id:1,
								label:'主机一'
							},{
								id: 2,
								label:'主机二'
							},{
								id: 3,
								label:'主机三'
							}],
							recordTypeId: 2, // 这里只是测试数据  选中记录类型
							recordTypeOptions:[{ // 记录类型可选
								id:1,
								label: '测试类型1'
							},{
								id:2,
								label: '测试类型2'
							},{
								id:3,
								label: '测试类型3'
							}] ,
							area: '测试地址', // 地址
							priorityId: 1, // 优先级选中id
							priorityOptions:[{
								id:1,
								label: '优先级1'
							},{
								id:2,
								label: '优先级2'
							},{
								id:3,
								label: '优先级3'
							}],
							lastOpeartionTime:'2020-1-21'
						},{
							id: 2,
							isNew: false , // 是否是新增的  默认是false
							isEdit:false, // 是否处于可编辑状态   默认为不可编辑
							activeHostId: 2,  // 这里只是测试数据  选中的主机类型  
							hostOptions:[{  // 主机可选
								id:1,
								label:'主机一'
							},{
								id: 2,
								label:'主机二'
							},{
								id: 3,
								label:'主机三'
							}],
							recordTypeId: 2, // 这里只是测试数据  选中记录类型
							recordTypeOptions:[{ // 记录类型可选
								id:1,
								label: '测试类型1'
							},{
								id:2,
								label: '测试类型2'
							},{
								id:3,
								label: '测试类型3'
							}] ,
							area: '测试地址', // 地址
							priorityId: 1, // 优先级选中id
							priorityOptions:[{
								id:1,
								label: '优先级1'
							},{
								id:2,
								label: '优先级2'
							},{
								id:3,
								label: '优先级3'
							}],
							lastOpeartionTime:'2020-1-21'
						},{
							id: 3,
							isNew: false , // 是否是新增的  默认是false
							isEdit:false, // 是否处于可编辑状态   默认为不可编辑
							activeHostId: 2,  // 这里只是测试数据  选中的主机类型  
							hostOptions:[{  // 主机可选
								id:1,
								label:'主机一'
							},{
								id: 2,
								label:'主机二'
							},{
								id: 3,
								label:'主机三'
							}],
							recordTypeId: 2, // 这里只是测试数据  选中记录类型
							recordTypeOptions:[{ // 记录类型可选
								id:1,
								label: '测试类型1'
							},{
								id:2,
								label: '测试类型2'
							},{
								id:3,
								label: '测试类型3'
							}] ,
							area: '测试地址', // 地址
							priorityId: 1, // 优先级选中id
							priorityOptions:[{
								id:1,
								label: '优先级1'
							},{
								id:2,
								label: '优先级2'
							},{
								id:3,
								label: '优先级3'
							}],
							lastOpeartionTime:'2020-1-21'
						}],


						isFirstShowOrderType: true, // 是否是第一次展示工单类型
						selectOrderType: 'allOrder', // 选中工单类型  默认为全选
						orderTypeGroup: [{
								label: '全部',
								value: 'allOrder'
							},
							{
								label: '未处理',
								value: 'waithandle'
							}, {
								label: '处理中',
								value: 'handling'
							}, {
								label: '已处理',
								value: 'alreadyhandle'
							}, {
								label: '已评价',
								value: 'alreadyestimate'
							}
						],
						searchkeywords: undefined, //  搜索关键字


						// 分页信息
						pageInfo: {
							pagesize: 8,
							currentPage: 1,
							totalSize: 41
						},
						pageOptions: [{
							value: 6,
							label: '6条/页'
						}, {
							value: 8,
							label: '8条/页'
						}, {
							value: 10,
							label: '10条/页'
						}],


					}
				},

				methods: {
					// 确认删除记录
					confirmRemoveColumn: _throttle(function() {
						console.log(this.activeSelectInfo)
						this.removeRecordVisble  =  false
						this.$message.success('删除记录成功！')
					}),
					// 保存数据的方法
					saveColum:_throttle(function(row) {
						let that =  this
						 this.$refs['ruleForm'].validate(function(valid){
						          if (valid) {
									if(row.activeHostId === undefined  || row.recordTypeId === undefined || row.priorityId === undefined) {
										 that.$message.error('请完善表单再提交！')
										return
									}
									
									that.$message.success('表单提交成功！')
									// for 循环改变了对象的属性  foreach 就不行
									for(var i=0;i<that.initTableData.length;i++){
									    if(that.initTableData[i].id === row.id ){
									      row.isEdit =  false
									      row.isNew =  false
										  that.initTableData[i] = row
									    }
									}
									that.tableData =  deepCopy(that.initTableData)
									row.isEdit =  false
									
						          } else {
						            // that.$message.error('请完善表单再提交！')
						            return false;
						          }
						    });
						
						


					},300),
					// 取消记录的方法
					cancelColum:_throttle(function(row) {
						let paramInfo
						for(var i=0;i < this.initTableData.length;i++){
						    if(this.initTableData[i].id === row.id ){
								paramInfo = this.initTableData[i]
						    }
						}
						console.log(paramInfo)
						
						// 当对象无法改变是 就改变对象的属性值 一一改变
						if(paramInfo !== undefined  &&  paramInfo !== null) {
							for(let i in paramInfo){
								row[i] = paramInfo[i]
							}
						}else {
							this.tableData = this.tableData.filter(function(item) {
								return item.id !== row.id
							})
							return
						}
						
						row.isEdit =  false
					},100),
					
					
					// 删除表单数据
					removeColum: _throttle(function(row) {
						this.activeSelectInfo = row
						this.removeRecordVisble = true
						
					}),
					
					// 修改表单数据
					editColum: function(row) {
						row.isEdit = true
					},
					
					
					// 处理表单数据
					handleTableText: function(row,key) {
						let text = ''
						if(key === 'recordTypeId'  && row.recordTypeOptions.length) {
							console.log(row)
							row.recordTypeOptions.forEach(function(item) {
								if(item.id === row.recordTypeId) {
									text = item.label
								} 
							})
						}
						
						if(key === 'activeHostId'  && row.hostOptions.length) {
							row.hostOptions.forEach(function(item) {
								if(item.id === row.activeHostId) {
									text = item.label
								} 
							})
						}
						
						if(key === 'priorityId'  && row.priorityOptions.length) {
							row.priorityOptions.forEach(function(item) {
								if(item.id === row.priorityId) {
									text = item.label
								} 
							})
						}
						
						
						
						return text
					},
					// 处理是否有新纪录
					handleHaveNew: function() {
						let newOptions = this.tableData.filter(function(item) {
							return item.isNew === true
						})
						if(newOptions.length && newOptions.length > 0) {
							return true
						}else {
							return false
						}
					},
					
					// 点击添加记录
					handleClickAddRecord: _throttle(function() {
						// 已经有新纪录不能再添加
						if(this.handleHaveNew() === true) {
							return
						}
						
						// 都变为不可编辑
						this.tableData.forEach(function(item) {
							item.isEdit =  false
						})
						
						this.tableData.unshift({
								id: Number(this.initTableData.length) + 1,   // 这里应该写一个独立的id
								isNew:true,
								isEdit:true, // 是否处于可编辑状态   默认为不可编辑
								activeHostId: undefined,  // 这里只是测试数据  选中的主机类型  
								hostOptions:[{  // 主机可选
									id:1,
									label:'主机一'
								},{
									id: 2,
									label:'主机二'
								},{
									id: 3,
									label:'主机三'
								}],
								recordTypeId: undefined, // 这里只是测试数据  选中记录类型
								recordTypeOptions:[{ // 记录类型可选
									id:1,
									label: '测试类型1'
								},{
									id:2,
									label: '测试类型2'
								},{
									id:3,
									label: '测试类型3'
								}] ,
								area: undefined, // 地址
								priorityId: undefined, // 优先级选中id
								priorityOptions:[{
									id:1,
									label: '优先级1'
								},{
									id:2,
									label: '优先级2'
								},{
									id:3,
									label: '优先级3'
								}],
								lastOpeartionTime:undefined
						})
						// this.tableData = deepCopy(this.initTableData) 
					}),
					
					// 跳转到域名管理页面
					gotoDomainHomePage:_throttle(function() {
						window.open('index.html','_self')
					}),
					
					
					// 返回到上一页面
					returnCurrentPage:_throttle(function() {
						returnCurrentPage()
					}),
					
					
					
					// 新增 end
					
					
					

					
					
					// 点击取消转入
					handleClickCancelOut: _throttle(function(row){
						this.outResultInfo = deepCopy(row)
						this.domainNameOutreusltVisble = true
					}),
					


					// 跳转到首页的方法
					handleClickGotoHomePage: function() {
						gotohomePage()
					},


					//处理状态
					handlestatus: function(row) {
						// 状态  激活：activate ；  欺诈 cheat；待审核 waitHandle; overdue 过期
						switch (row.status) {
							case 'success':
								return '<p style="color:#3FBF70">转出成功</p>'
							case 'fail':
								return '<p style="color:#F21C30">转出失败</p>'
							case 'transfering':
								return '<p style="color:#6462F3">转出中</p>'
							case 'cancel':
								return '<p>转出取消</p>'
							default:
								break;
						}

					},
					handleSizeChange: function(e) {
						console.log(e)
					},
					handleCurrentChange: function(val) {
						console.log('当前页为xxxxx')
					},
				},
				mounted: function() {
					this.initTableData = deepCopy(this.tableData)
				}

			})
		</script>
	</body>
</html>
